import { Table, Button, Drawer, Tag, message, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import React, { useState, useEffect } from 'react';
import { menulist } from '../request/api';
import {
    Form,
    Input,
    Radio,
    Select,
    Switch,
} from 'antd';
import '../assets/css/menu.css';
import { menuaddedit, menuinfo, menudelete } from '../request/api';

function Menus() {
    const { Column } = Table;

    let [menuList, setMenList] = useState([]);

    useEffect(() => {
        getMenuList();
    }, [])

    const [open, setOpen] = useState(false);
    const onClose = () => {
        reset();
    };

    let [form, setForm] = useState({
        title: '',
        pid: '',
        icon: '',
        type: '',
        url: '',
        status: ''
    })

    function getMenuList() {
        menulist().then(res => {
            if (res.code == 200) {
                res.list.forEach(item => {
                    item.key = Math.random() * Math.random() * Math.random();
                    if (item.children) {
                        item.children.map(item2 => {
                            item2.key = Math.random() * Math.random() * Math.random();
                        })
                    }
                })
                setMenList(res.list);
            }
        })
    }

    function reset() {
        setOpen(false);
        setForm({
            title: '',
            pid: '',
            icon: '',
            type: '',
            url: '',
            status: ''
        })
    }

    function select(e) {
        setForm({
            ...form,
            pid: e,
            type: e == 0 ? 1 : 2
        });
    }

    function changeTitle(e) {
        setForm({
            ...form,
            title: e.target.value
        })
    }

    function changeicon(e) {
        setForm({
            ...form,
            icon: e.target.value
        })
    }

    function changeurl(e) {
        setForm({
            ...form,
            url: e.target.value
        })
    }

    function changestatus(e) {
        setForm({
            ...form,
            status: e
        })
    }

    function editShow(id) {
        menuinfo({ id }).then(res => {
            setOpen(true);
            if (res.code == 200) {
                setForm({
                    ...res.list,
                    status: res.list.status == 1 ? true : false,
                    id,
                })
            }
        })
    }

    function submit() {
        let url = form.id ? '/menuedit' : '/menuadd';
        menuaddedit(url, {
            ...form,
            status: form.status ? 1 : 2
        }).then(res => {
            if (res.code == 200) {
                getMenuList();
                reset();
                message.success(res.msg);
                return;
            }
            message.warning(res.msg);
        })
    }

    const [modal, contextHolder] = Modal.useModal();

    function del(id) {
        modal.confirm({
            title: '警告',
            icon: <ExclamationCircleOutlined />,
            content: '您确定删除此项？',
            okText: '确认',
            cancelText: '取消',
            onOk: function () {
                menudelete({ id }).then(res => {
                    if (res.code == 200) {
                        getMenuList();
                        message.success(res.msg);
                    } else {
                        message.warning(res.msg);
                    }
                })
            },
            onCancel: function () {
                message.info('您取消了');
            }
        });
    };

    return (
        <div className='menu'>
            <Button onClick={() => setOpen(true)} type="primary" size='large'>
                添加
            </Button>
            <Table dataSource={menuList} defaultExpandAllRows={true}>
                <Column title="菜单编号" dataIndex="id" key="id" />
                <Column title="菜单标题" dataIndex="title" key="title" />
                <Column title="上级菜单" dataIndex="pid" key="pid" />
                <Column title="菜单图标" dataIndex="icon" key="icon" />
                <Column title="菜单地址" dataIndex="url" key="url" />
                <Column title="状态" dataIndex='status' render={(e) => {
                    return <Tag size="middle">{e == 1 ? '启用' : '禁用'}</Tag>
                }}>

                </Column>
                <Column title="操作" render={(e) => {
                    return <>
                        <Button onClick={() => editShow(e.id)} type="primary">
                            编辑
                        </Button>
                        <Button onClick={() => del(e.id)} style={{
                            margin: '0 0 0 5px'
                        }} type="primary">
                            删除
                        </Button>
                        {contextHolder}
                    </>
                }}>
                </Column>
            </Table>
            <Drawer style={{ width: '400px', right: 0 }} className='drawer' title={form.id ? '编辑' : "添加"} placement="right" onClose={onClose} open={open}>
                <Form
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 14,
                    }}
                    layout="horizontal"
                    size='default'
                    style={{
                        width: '350px'
                    }}
                >
                    <Form.Item label="菜单名称">
                        <Input onChange={changeTitle} value={form.title} />
                    </Form.Item>
                    <Form.Item label="上级菜单">
                        <Select onSelect={select} value={form.pid}>
                            <Select.Option value={0}>顶级菜单</Select.Option>
                            {
                                menuList.map(item => <Select.Option key={item.id} value={item.id}>{item.title}</Select.Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label="菜单类型">
                        <Radio.Group value={form.type} disabled>
                            <Radio value={1}>目录</Radio>
                            <Radio value={2}>菜单</Radio>
                        </Radio.Group>
                    </Form.Item>
                    {
                        form.type == 1 ?
                            <Form.Item label="菜单图标">
                                <Input onChange={changeicon} value={form.icon} />
                            </Form.Item> : form.type == 2 ?
                                <Form.Item label="菜单地址">
                                    <Input onChange={changeurl} value={form.url} />
                                </Form.Item> : ''
                    }
                    <Form.Item label="状态">
                        <Switch onChange={changestatus} checked={form.status} />
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={submit} type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
        </div >
    )
}

export default Menus;